<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    
    <div >
        <p id="rsp">这里是结果</p>
        <input id="kw" type="text" value="inqenuty">
        <button onclick="funBing()">xhr2Btn</button>
        <button onclick="funbi()">axbtn</button>

        </div>
    
    <button onclick="myFunction()">xhrBtn</button>
    <button onclick="funa()">xhr1Btn</button>
   
    <button onclick="funb()">axiosBtn</button>

    <script type="text/javascript">
        function myFunction() {
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'https://gitee.com/api/v3/internal/my_resources');
            xhr.send();
            xhr.onload = function () {
                console.log(xhr.responseText)
            }
        }
        function funBing(){
            var xhr = new XMLHttpRequest();
            var kw = document.getElementById('kw').value
            let url = 'https://cn.bing.com/dict/search?q='+kw
            console.log(url)
            xhr.open('get', url);
            xhr.send();
            xhr.onload = function () {
                console.log(xhr.responseText)
            }
        }
        function funa() {
            var data = "format=json";
            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;
            xhr.addEventListener("readystatechange", function () {
                if (this.readyState === 4) {
                    console.log(this.responseText);
                }
            });
            xhr.open("POST", "https://v2.alapi.cn/api/soul");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }
        function funbi(){
            var kw = document.getElementById('kw').value
            let url = 'https://cn.bing.com/dict/search?q='+kw
            console.log(url)
            axios.get(url)
            .then(function(response){
                if(response.status==200){
                    domParser = new DOMParser(); 
                    doc = domParser.parseFromString(response.data, "text/html");
                    console.log(doc)
                }else{
                    alert(response.status);
                }
            })
        }
        function funb() {
            // 为给定 ID 的 user 创建请求
            axios.get('https://v1.hitokoto.cn/')
                .then(function (response) {
                    if (response.status == 200) {
                        cnt = response.data.hitokoto
                        var ctg = document.getElementById("rsp")
                        ctg.innerText = cnt
                        // alert(cnt)
                    } else {

                    }
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
    <!-- ajax技术需要运行在网站环境下，有个跨域访问的问题 -->
    <!-- 跨域访问
    出于安全原因，现代浏览器不允许跨域访问。
    意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
    W3School 上的实例都会打开位于 W3School 域上的 XML 文件。
    如果您希望在自己的页面上使用以上实例，那么您所加载的 XML 文件必须位于您自己的服务器上。 -->

    <div>
        1. 创建Ajax对象 <br>
        var xhr = new XMLHttpRequest();<br>
        2. 高速Ajax请求地址以及请求方式 <br>
        3. 发送请求 <br>
        4.获取数据并解系 <br>
    </div>
<div>
    <span>2021-07-28</span> XMLHttpRequest 跨域访问失败；axios 依旧坚挺<br>
</div>

</body>

</html>